import React, { FC } from 'react'
import style from './index.module.less'
import { useSelector } from 'react-redux';
import { INIT_TAB_STATE } from '@redux/reducers/tab';
import pageRouter from '../../pages/index'

const pageKeys = Object.keys(pageRouter)

export default function Main() {
  const { windows, activeWindowId } = useSelector((state: { tab: INIT_TAB_STATE }) => {
    return {
      windows: state.tab.windows,
      activeWindowId: state.tab.activeWindowId
    }
  })
  return (
    <div className={style.container}>
      {
          windows.map(p => {
            const name = p.componentName
            const Page = pageRouter[name]
            const styles: { [k: string]: any } = {}
            if (p.id !== activeWindowId) {
              styles.display = 'none'
            }
            return (
              <div className={style.page} key={p.key} style={styles}>
                {Page ? <Page {...p} /> : <span>模块不存在</span>}
              </div>
            )
          })
        }
    </div>
  )
}
